<!DOCTYPE html>
<html>
<head>
    <title>轮播图片状态测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .test-container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .slider-image-group {
            border: 1px solid #ccc;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            background: #f9f9f9;
        }
        .status-test {
            margin: 10px 0;
            padding: 10px;
            background: #e8f4f8;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="test-container">
            <h3>轮播图片状态功能测试</h3>
            
            <!-- 模拟图片数据 -->
            <input type="hidden" name="row[image]" id="c-image" value='[
                {"title":"测试图片1","href":"#","src":"/uploads/test1.jpg","status":"1"},
                {"title":"测试图片2","href":"#","src":"/uploads/test2.jpg","status":"0"}
            ]'>
            
            <div id="slider-images-container">
                <!-- 图片组将在这里动态生成 -->
            </div>
            
            <div class="status-test">
                <h4>当前图片JSON数据：</h4>
                <pre id="current-json"></pre>
            </div>
            
            <button type="button" class="btn btn-primary" onclick="addTestImage()">添加测试图片</button>
            <button type="button" class="btn btn-info" onclick="refreshDisplay()">刷新显示</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 模拟后端JS的核心功能
        var Controller = {
            api: {
                // 初始化图片组
                initImageGroups: function() {
                    var existingImages = [];
                    try {
                        var imageData = $('#c-image').val();
                        if (imageData) {
                            existingImages = JSON.parse(imageData);
                        }
                    } catch(e) {
                        console.error('解析图片数据失败:', e);
                    }
                    
                    // 清空容器
                    $('#slider-images-container').empty();
                    
                    // 加载现有图片
                    if (existingImages.length > 0) {
                        $.each(existingImages, function(index, image) {
                            addImageGroup(image, index);
                        });
                    }
                },
                
                // 更新图片字段
                updateImageField: function() {
                    var images = [];
                    $('.slider-image-group').each(function() {
                        var $group = $(this);
                        var title = $group.find('input[name*="[title]"]').val() || '';
                        var href = $group.find('input[name*="[href]"]').val() || '';
                        var src = $group.find('input[name*="[src]"]').val() || '';
                        var status = $group.find('input[name*="[status]"]').val() || '1';
                        
                        if (title || href || src) {
                            images.push({
                                title: title,
                                href: href,
                                src: src,
                                status: status
                            });
                        }
                    });
                    
                    $('#c-image').val(JSON.stringify(images));
                    $('#current-json').text(JSON.stringify(images, null, 2));
                }
            }
        };
        
        // 添加图片组
        function addImageGroup(data, index) {
            data = data || {title: '', href: '', src: '', status: '1'};
            index = index !== undefined ? index : $('.slider-image-group').length;
            
            var html = `
                <div class="slider-image-group" data-index="${index}">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>标题:</label>
                                <input type="text" name="images[${index}][title]" class="form-control" value="${data.title}" placeholder="图片标题">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>链接:</label>
                                <input type="text" name="images[${index}][href]" class="form-control" value="${data.href}" placeholder="链接地址">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>图片:</label>
                                <input type="text" name="images[${index}][src]" class="form-control" value="${data.src}" placeholder="图片地址">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 状态开关 -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>图片状态:</label>
                                <div style="display: flex; align-items: center;">
                                    <input type="hidden" id="images-${index}-status" name="images[${index}][status]" class="image-status-input" value="${data.status}">
                                    <a href="javascript:;" data-toggle="switcher" class="btn-switcher ${data.status !== '0' ? 'active' : 'text-gray'}" data-input-id="images-${index}-status" data-yes="1" data-no="0">
                                        <i class="fa fa-toggle-on fa-2x ${data.status === '0' ? 'fa-flip-horizontal' : ''}"></i>
                                    </a>
                                    <div data-favisible="switch=1" class="p-3" style="margin-left: 10px; font-size: 12px; ${data.status === '0' ? 'display:none;' : ''}">开启</div>
                                    <div data-favisible="switch=0" class="p-3" style="margin-left: 10px; font-size: 12px; ${data.status !== '0' ? 'display:none;' : ''}">禁用</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                </div>
            `;
            
            $('#slider-images-container').append(html);
            
            // 初始化状态开关
            initStatusSwitcher($('.slider-image-group').last());
            
            // 绑定输入变更事件
            $('.slider-image-group').last().find('input').on('change', function() {
                Controller.api.updateImageField();
            });
        }
        
        // 初始化状态开关
        function initStatusSwitcher($group) {
            var $switcher = $group.find('.btn-switcher');
            var $statusInput = $group.find('.image-status-input');
            
            $switcher.on('click', function() {
                var $this = $(this);
                var inputId = $this.data('input-id');
                var $input = $('#' + inputId);
                var yes = $this.data('yes');
                var no = $this.data('no');
                
                if ($this.hasClass('active')) {
                    // 当前是开启状态，切换为禁用
                    $this.removeClass('active').addClass('text-gray');
                    $this.find('i').addClass('fa-flip-horizontal');
                    $input.val(no);
                    $statusInput.val(no);
                } else {
                    // 当前是禁用状态，切换为开启
                    $this.removeClass('text-gray').addClass('active');
                    $this.find('i').removeClass('fa-flip-horizontal');
                    $input.val(yes);
                    $statusInput.val(yes);
                }
                
                // 更新显示状态文本
                $group.find('[data-favisible]').hide();
                $group.find('[data-favisible="switch=' + $input.val() + '"]').show();
                
                // 更新JSON数据
                Controller.api.updateImageField();
            });
        }
        
        // 添加测试图片
        function addTestImage() {
            addImageGroup({
                title: '新测试图片',
                href: '#',
                src: '/uploads/newtest.jpg',
                status: '1'
            });
            Controller.api.updateImageField();
        }
        
        // 刷新显示
        function refreshDisplay() {
            Controller.api.updateImageField();
        }
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            Controller.api.initImageGroups();
            Controller.api.updateImageField();
        });
    </script>
</body>
</html>